@import '../../style/themes/index';
@import '../../style/mixins/index';

@graph-stroke-color: @primary-3;
@graph-focused-color: @primary-color;
@graph-stroke-width-base: 2px;
@graph-stroke-width-sm: 1px;

@graph-node-background-color: @primary-1;
@graph-node-border-color: tint(@primary-color, 50%);

@graph-prefix-cls: ~'nz-graph';

.@{graph-prefix-cls} {
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
  background-color: @component-background;

  &-background {
    cursor: default;
    fill: @component-background;
  }

  &-node-rect {
    fill: @graph-node-background-color;
    stroke: none;
  }

  &-node-text {
    fill: @text-color;
  }

  &-edge-line {
    fill: none;
    stroke: @graph-stroke-color;
    stroke-linecap: round;
    stroke-width: @graph-stroke-width-base;

    &:hover {
      stroke: @graph-focused-color;
    }
  }

  &-edge-text {
    fill: fade(@text-color, 85%);
    font-size: @font-size-sm;
  }

  &-edge-marker {
    color: @graph-stroke-color;
    fill: @graph-stroke-color;
  }

  &-node-wrapper {
    cursor: default;
    font-size: @font-size-sm;
    width: 100%;
    height: 100%;
    text-align: left;
    word-break: break-all;
    background-color: @graph-node-background-color;
    border: @graph-stroke-width-sm solid @graph-node-border-color;
    transition: background-color 0.2s ease;
    color: @text-color;
    &:hover {
      border-color: @graph-focused-color;
    }

    .node-content {
      height: 100%;
      padding: @padding-xs @padding-md;
    }

    .title {
      word-break: keep-all;
      white-space: nowrap;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      height: @height-sm;

      .action-icon {
        position: absolute;
        right: @padding-md;
        cursor: pointer;
      }
    }

    .label {
      height: calc(100% - 40px);
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  &-custom-node {
    .nz-graph-node-rect {
      fill: transparent;
    }
  }

  .@{graph-prefix-cls}-node-expanded .@{graph-prefix-cls}-node-wrapper {
    background-color: transparent;
  }

  &&-auto-fit {
    .@{graph-prefix-cls}-node-wrapper {
      height: fit-content;
    }

    .@{graph-prefix-cls}-group-node .@{graph-prefix-cls}-node-wrapper {
      height: 100%;
    }
  }

  &-minimap {
    background-color: @component-background;
    transition: opacity 0.3s linear;
    pointer-events: auto;
    border: @border-width-base @border-style-base @border-color-base;
    z-index: 99;

    &.hidden {
      opacity: 0;
      pointer-events: none;
    }

    canvas {
      border: 1px solid #999;
    }

    rect {
      fill: @component-background;
      stroke: @text-color-secondary;
      stroke-width: @border-width-base;
      fill-opacity: 0;
      filter: url(#minimapDropShadow);
      cursor: move;
    }

    svg {
      position: absolute;
    }

    .buffer,
    .viewport {
      display: block;
      height: 100%;
    }
  }

  nz-graph-minimap {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
